<template>
    <TabGrayEasyCard :title="'开办费'" @onMore="goDetail(props.permi)" :tabs="card.tabs" :curTab="card.curTab"
        :tabRight="card.tabRight" @onChange="changeTab" :grayCardList="card.grayCardList" :lineText="''" :barText="''"
        :unitText="`${card.unitText}`" :updateText="card.updateText"
        v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }">
        <slot>
            <!-- :cell-class-name="getCellClassName" -->
            <el-table :data="card.tableData" height="100%">
                <el-table-column label="指标" prop="subjectName" :align="'left'" min-width="110" show-overflow-tooltip />
                <el-table-column label="预算" :align="'right'" min-width="110">
                    <template #default="scope">
                        {{ toThousands(scope.row.val1) }}
                    </template>
                </el-table-column>
                <el-table-column label="实际" :align="'right'" min-width="110">
                    <template #default="scope">
                        {{ toThousands(scope.row.val2) }}
                    </template>
                </el-table-column>
                <el-table-column label="可用余额" :align="'right'" min-width="110">
                    <template #default="scope">
                        {{ toThousands(scope.row.val3) }}
                    </template>
                </el-table-column>
            </el-table>
        </slot>
    </TabGrayEasyCard>
</template>

<script setup>
import TabGrayEasyCard from '@/DbComponents/tabGrayEasyCard'
import { toThousands } from '@/utils/number-util'
import { queryFinReportCommonCardApi, queryFinReportExpenseTotalCardApi } from '@/api/Manage/Business/finance'
import { reactive, watch, computed } from 'vue'
import { reportLog } from '@/utils/reportLog'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
    permi: {
        type: String,
        required: false,
        default: ''
    },
    hideList: {
        type: Array,
        required: false,
    },
    biProjectCode: {
        type: String,
        required: false,
        default: ''
    },
    biProjectName: {
        type: String,
        required: false,
        default: ''
    },
    yearmonth: {
        type: String,
        required: false,
        default: ''
    },
    subjectType: { // 报表类型 1：资金来源与占用表 2：投入与产出表 3：利润表 4：开办费报表
        type: Number,
        required: true,
    },
})

const card = reactive(
    {
        tabs: [{ label: '全部', value: '2' }],
        curTab: '2',
        tabRight: '',
        grayCardList: [{ label: '预算总额', value: '', unit: '', color: '' }, { label: '实际总额', value: '', unit: '', color: '' }, { label: '可用余额', value: '', unit: '', color: '' }],
        unitText: '',
        updateText: '',
        tableData: [],
        // startDate: '',
        // endDate: '',
    }
)
const getCardData = () => {

    queryFinReportExpenseTotalCardApi({ biProjectCode: props.biProjectCode, reportMonth: props.yearmonth, cardType: card.curTab, subjectType: props.subjectType }).then((res) => {
        if (res.data.code == 200) {
            card.grayCardList[0].value = toThousands(res.data.data.val1)
            card.grayCardList[1].value = toThousands(res.data.data.val2)
            card.grayCardList[2].value = toThousands(res.data.data.val3)
        }
    }).catch(err => {
        console.log(err)
    });

    queryFinReportCommonCardApi({ biProjectCode: props.biProjectCode, reportMonth: props.yearmonth, cardType: card.curTab, subjectType: props.subjectType }).then((res) => {
        if (res.data.code == 200) {
            card.tabRight = props.yearmonth
            card.tableData = res.data.data
        }
    }).catch(err => {
        console.log(err)
    });
}

// { row, column, rowIndex, columnIndex }
// const getCellClassName = ({ row, column, columnIndex }) => {
//     // 最后一列变色 需要改
//     if (columnIndex == 4 && row[column] == 2) {
//         return 'zs-text-green'
//     }
//     if (columnIndex == 4 && row[column] == 1) {
//         return 'zs-text-red'
//     }
// }

const goDetail = (permi) => {
    reportLog({
        type: 4,
        resourceKey: permi,
    })
    router.push({
        path: '/Manage/Business/financeDetail/financeDetail',
        query: {
            rTitle: '开办费',
            biProjectCode: props.biProjectCode,
            biProjectName: props.biProjectName,
            yearmonth: props.yearmonth,
            subjectType: props.subjectType,
            cardType: card.curTab
        },
    })
}
const changeTab = (value) => {
    // 切换tab
    card.curTab = value
    getCardData()
}

const biProjectCode = computed(() => {
    return props.biProjectCode
});
watch(biProjectCode, () => {
    getCardData()
}, { deep: true, immediate: true });
</script>

<style scoped lang="scss"></style>
